window.addEventListener('load', function() {
    let focus = this.document.querySelector('.focus');
    let ul = focus.querySelector('ul');
    let ol = focus.children[1];

    let count = 0;
    let w = focus.offsetWidth;
    let lunbuo = this.setInterval(function() {
        count++;
        let translateX = -count * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 1000);

    ul.addEventListener('transitionend', function() {
        if (count >= 3) {
            ul.style.transition = 'none';
            count = 0;
            ul.style.transform = 'translateX(0px)';
        } else if (count < 0) {
            ul.style.transition = 'none';
            count = 2;
            let translateX = -count * w;
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }

        ol.querySelector('.current').classList.remove('current');
        ol.children[count].classList.add('current');

    })

    let startX = 0;
    let moveX = 0;
    ul.addEventListener('touchstart', function(e) {
        clearInterval(lunbuo);
        startX = e.targetTouches[0].pageX;
    });
    ul.addEventListener('touchmove', function(e) {
        moveX = e.targetTouches[0].pageX - startX;
        let translateX = -count * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translateX + 'px)';
    });
    ul.addEventListener('touchend', function() {
        if (moveX > 50) {
            count--;
            let translateX = -count * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        } else if (moveX < -50) {
            count++;
            let translateX = -count * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        } else {
            let translateX = -count * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }

        clearInterval(lunbuo);
        lunbuo = setInterval(function() {
            count++;
            let translateX = -count * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 1000);
    });

    let goBack = this.document.querySelector('.goBack');
    let navCommon = this.document.querySelector('.nav-common');
    this.window.addEventListener('scroll', function() {
        if (this.window.pageYOffset >= navCommon.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    })
    goBack.addEventListener('click', function() {
        window.scroll(0, 0);
    })

})